<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="box">
        <div class="box-1">
            卡片列表🍓🍉🍊🍌
        </div>
        <div class="dis">
            <div class="box-2">
                <div>
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.54qlbLNAZ64K94c_DCT-qAAAAA?w=141&h=166&c=7&r=0&o=5&dpr=1.1&pid=1.7"
                        alt="">
                    <h2>不须细为并</h2>
                </div>
                <div class='box-21'>
                    <div class='box-211'>
                        <div>发行日期</div>
                        <div>1982-12-53</div>
                        <div>金额 &nbsp; $1231</div>
                    </div>
                    <div class='box-212'>
                        <div>客户姓名</div>
                        <div>钱丽</div>
                        <div>状态</div>
                    </div>
                </div>
                <div class='box-22'>
                    <div>详情</div>
                    <div>型律想就爱看时间阿松大</div>
                </div>
            </div>
            <div class="box-2">
                <div>
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.54qlbLNAZ64K94c_DCT-qAAAAA?w=141&h=166&c=7&r=0&o=5&dpr=1.1&pid=1.7"
                        alt="">
                    <h2>不须细为并</h2>
                </div>
                <div class='box-21'>
                    <div class='box-211'>
                        <div>发行日期</div>
                        <div>1982-12-53</div>
                        <div>金额$1231</div>
                    </div>
                    <div class='box-212'>
                        <div>客户姓名</div>
                        <div>钱丽</div>
                        <div>状态</div>
                    </div>
                </div>
                <div class='box-22'>
                    <div>详情</div>
                    <div>型律想就爱看时间阿松大</div>
                </div>
            </div>
            <div class="box-2">
                <div>
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.54qlbLNAZ64K94c_DCT-qAAAAA?w=141&h=166&c=7&r=0&o=5&dpr=1.1&pid=1.7"
                        alt="">
                    <h2>不须细为并</h2>
                </div>
                <div class='box-21'>
                    <div class='box-211'>
                        <div>发行日期</div>
                        <div>1982-12-53</div>
                        <div>金额$1231</div>
                    </div>
                    <div class='box-212'>
                        <div>客户姓名</div>
                        <div>钱丽</div>
                        <div>状态</div>
                    </div>
                </div>
                <div class='box-22'>
                    <div>详情</div>
                    <div>型律想就爱看时间阿松大</div>
                </div>
            </div>
            <div class="box-2">
                <div>
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.54qlbLNAZ64K94c_DCT-qAAAAA?w=141&h=166&c=7&r=0&o=5&dpr=1.1&pid=1.7"
                        alt="">
                    <h2>不须细为并</h2>
                </div>
                <div class='box-21'>
                    <div class='box-211'>
                        <div>发行日期</div>
                        <div>1982-12-53</div>
                        <div>金额$1231</div>
                    </div>
                    <div class='box-212'>
                        <div>客户姓名</div>
                        <div>钱丽</div>
                        <div>状态</div>
                    </div>
                </div>
                <div class='box-22'>
                    <div>详情</div>
                    <div>型律想就爱看时间阿松大</div>
                </div>
            </div>
        </div>
        <div class="dis">
            <div class="box-2">
                <div>
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.54qlbLNAZ64K94c_DCT-qAAAAA?w=141&h=166&c=7&r=0&o=5&dpr=1.1&pid=1.7"
                        alt="">
                    <h2>不须细为并</h2>
                </div>
                <div class='box-21'>
                    <div class='box-211'>
                        <div>发行日期</div>
                        <div>1982-12-53</div>
                        <div>金额 &nbsp; $1231</div>
                    </div>
                    <div class='box-212'>
                        <div>客户姓名</div>
                        <div>钱丽</div>
                        <div>状态</div>
                    </div>
                </div>
                <div class='box-22'>
                    <div>详情</div>
                    <div>型律想就爱看时间阿松大</div>
                </div>
            </div>
            <div class="box-2">
                <div>
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.54qlbLNAZ64K94c_DCT-qAAAAA?w=141&h=166&c=7&r=0&o=5&dpr=1.1&pid=1.7"
                        alt="">
                    <h2>不须细为并</h2>
                </div>
                <div class='box-21'>
                    <div class='box-211'>
                        <div>发行日期</div>
                        <div>1982-12-53</div>
                        <div>金额$1231</div>
                    </div>
                    <div class='box-212'>
                        <div>客户姓名</div>
                        <div>钱丽</div>
                        <div>状态</div>
                    </div>
                </div>
                <div class='box-22'>
                    <div>详情</div>
                    <div>型律想就爱看时间阿松大</div>
                </div>
            </div>
            <div class="box-2">
                <div>
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.54qlbLNAZ64K94c_DCT-qAAAAA?w=141&h=166&c=7&r=0&o=5&dpr=1.1&pid=1.7"
                        alt="">
                    <h2>不须细为并</h2>
                </div>
                <div class='box-21'>
                    <div class='box-211'>
                        <div>发行日期</div>
                        <div>1982-12-53</div>
                        <div>金额$1231</div>
                    </div>
                    <div class='box-212'>
                        <div>客户姓名</div>
                        <div>钱丽</div>
                        <div>状态</div>
                    </div>
                </div>
                <div class='box-22'>
                    <div>详情</div>
                    <div>型律想就爱看时间阿松大</div>
                </div>
            </div>
            <div class="box-2">
                <div>
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.54qlbLNAZ64K94c_DCT-qAAAAA?w=141&h=166&c=7&r=0&o=5&dpr=1.1&pid=1.7"
                        alt="">
                    <h2>不须细为并</h2>
                </div>
                <div class='box-21'>
                    <div class='box-211'>
                        <div>发行日期</div>
                        <div>1982-12-53</div>
                        <div>金额$1231</div>
                    </div>
                    <div class='box-212'>
                        <div>客户姓名</div>
                        <div>钱丽</div>
                        <div>状态</div>
                    </div>
                </div>
                <div class='box-22'>
                    <div>详情</div>
                    <div>型律想就爱看时间阿松大</div>
                </div>
            </div>
        </div>
        <div class="dis">
            <div class="box-2">
                <div>
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.54qlbLNAZ64K94c_DCT-qAAAAA?w=141&h=166&c=7&r=0&o=5&dpr=1.1&pid=1.7"
                        alt="">
                    <h2>不须细为并</h2>
                </div>
                <div class='box-21'>
                    <div class='box-211'>
                        <div>发行日期</div>
                        <div>1982-12-53</div>
                        <div>金额 &nbsp; $1231</div>
                    </div>
                    <div class='box-212'>
                        <div>客户姓名</div>
                        <div>钱丽</div>
                        <div>状态</div>
                    </div>
                </div>
                <div class='box-22'>
                    <div>详情</div>
                    <div>型律想就爱看时间阿松大</div>
                </div>
            </div>
            <div class="box-2">
                <div>
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.54qlbLNAZ64K94c_DCT-qAAAAA?w=141&h=166&c=7&r=0&o=5&dpr=1.1&pid=1.7"
                        alt="">
                    <h2>不须细为并</h2>
                </div>
                <div class='box-21'>
                    <div class='box-211'>
                        <div>发行日期</div>
                        <div>1982-12-53</div>
                        <div>金额$1231</div>
                    </div>
                    <div class='box-212'>
                        <div>客户姓名</div>
                        <div>钱丽</div>
                        <div>状态</div>
                    </div>
                </div>
                <div class='box-22'>
                    <div>详情</div>
                    <div>型律想就爱看时间阿松大</div>
                </div>
            </div>
            <div class="box-2">
                <div>
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.54qlbLNAZ64K94c_DCT-qAAAAA?w=141&h=166&c=7&r=0&o=5&dpr=1.1&pid=1.7"
                        alt="">
                    <h2>不须细为并</h2>
                </div>
                <div class='box-21'>
                    <div class='box-211'>
                        <div>发行日期</div>
                        <div>1982-12-53</div>
                        <div>金额$1231</div>
                    </div>
                    <div class='box-212'>
                        <div>客户姓名</div>
                        <div>钱丽</div>
                        <div>状态</div>
                    </div>
                </div>
                <div class='box-22'>
                    <div>详情</div>
                    <div>型律想就爱看时间阿松大</div>
                </div>
            </div>
            <div class="box-2">
                <div>
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.54qlbLNAZ64K94c_DCT-qAAAAA?w=141&h=166&c=7&r=0&o=5&dpr=1.1&pid=1.7"
                        alt="">
                    <h2>不须细为并</h2>
                </div>
                <div class='box-21'>
                    <div class='box-211'>
                        <div>发行日期</div>
                        <div>1982-12-53</div>
                        <div>金额$1231</div>
                    </div>
                    <div class='box-212'>
                        <div>客户姓名</div>
                        <div>钱丽</div>
                        <div>状态</div>
                    </div>
                </div>
                <div class='box-22'>
                    <div>详情</div>
                    <div>型律想就爱看时间阿松大</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.box-1 {
    width: 98%;
    height: 50px;
    background-color: #fff;
    margin-left: 10px;
    line-height: 50px;
    margin-bottom: 20px;
    font-size: 20px;
}

.box {
    padding: 10px;
}

.box-2 img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    float: left;
}

.dis {
    display: flex;
}

.box-2 {
    width: 300px;
    height: 170px;
    background-color: #fff;
    // float: left;
    padding: 15px;
    margin: 10px;
}

.box-21 {
    display: flex;
    font-size: 16px;
    margin-top: 20px;

    .box-211 {
        margin-left: 20px;
        font-size: 14px;
        line-height: 24px;
    }

    .box-212 {
        margin-left: 20px;
        font-size: 14px;
        line-height: 24px;
    }
}

.box-22 {
    margin-left: 20px;
    margin-top: 10px;
    font-size: 14px;
    line-height: 24px;
}
</style>w